<template>
  <div class="login">
    <div class="title">医工医疗系统登录</div>
    <div class="input">
      <lay-input prefix-icon="layui-icon-username" type="text"  v-model="username" placeholder="请输入账号"></lay-input>
      <br>
      <br>
      <lay-input prefix-icon="layui-icon-password" type="password" v-model="password" placeholder="请输入密码" autocomplete="off" ></lay-input>
    </div>
    <div class="btn">
      <div class="primary" @click="submit">登录</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import { login } from "@/api/登录.js";
import { useRouter } from "vue-router";
import { userStore } from "@/pinia/store.js";

const store = userStore();
const router = useRouter();
const username = ref("");
const password = ref("");

const submit = async () => {
  login({
    username: username.value,
    password: password.value,
  }).then((data) => {
    //存储token在cookie中
    window.document.cookie =
        "token" +
        "=" +
        data.access_token +
        ";expires=" +
        (new Date().getTime() + 24 * 60 * 60 * 1000);
    // username: '管理员1', group: '管理员', department: '维修部'
    store.$patch({
      username: data.username,
      group: data.group,
      department: data.department,
    });

    router.push("/Benefit");
  });
}
onMounted(()=>{
  document.documentElement.addEventListener('keydown',(event)=>{
    if(event.keyCode === 13){
      submit()
    }
  })
})
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .title{
    font-size: 30px;
    font-weight: bold;
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: space-around;
    .primary{
      width: 60%;
      display: inline-block;
      vertical-align: middle;
      height: 38px;
      line-height: 38px;
      border: 1px solid transparent;
      padding: 0 18px;
      background-color: #009688;
      color: #fff;
      white-space: nowrap;
      text-align: center;
      font-size: 14px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
  .input{
    width: 80%;
  }
}
</style>